<template>
  <div class="location-setting">
    <div class="location-setting-address" v-if="address!==''">
      <span>{{address}}</span>
      <el-button size="mini" type="primary" @click="ensure">确定</el-button>
    </div>
    <div class="location-setting-pos">
      <div ref="map" class="location-setting-map"></div>
    </div>
  </div>
</template>

<script>
  import CommonApi from 'services/commonApi';

  export default {
    props: {
      value: {
        type: Array,
        required: true
      },
      viewMode: {
        type: String,
        default: '2D'
      },
      defaultAddress: {
        type: String,
        default: ''
      }
    },

    data() {
      return {
        marker: null,
        markerLayer: null,
        address: this.defaultAddress,
        latLng: null
      };
    },

    mounted() {
      this.initMap();
    },

    methods: {
      initMap() {
        let mapDom = this.$refs['map'];

        let value = this.value;
        let [lat = 27.77553979428615, lng = 120.45762166407053] = value;

        let center = new TMap.LatLng(lat, lng);
        let map = new TMap.Map(mapDom, {
          center: center,
          zoom: 14,
          viewMode: this.viewMode
        });

        let imgUrl = require('assets/images/markerDefault.png');
        this.markerLayer = new TMap.MultiMarker({
          id: "marker-layer",
          map: map,
          styles: {
            "marker": new TMap.MarkerStyle({
              "width": 25,
              "height": 35,
              "anchor": {
                x: 16,
                y: 32
              },
              "src": imgUrl
            })
          }
        });

        map.on("click", evt => {
          let latLng = evt.latLng;
          this.latLng = latLng;
          this.setAddress(latLng).then(address => {
            this.setMarker(latLng);
          });
        });

        if (value.length !== 0) {
          let latLng = _.cloneDeep(center);
          this.latLng = latLng;
          this.setMarker(latLng);
        }
      },

      setAddress(latLng) {
        return CommonApi.getAddressByLatLng(latLng).then(address => {
          this.address = address;
          return address;
        });
      },

      setMarker(latLng) {
        let marker = this.marker;
        if (marker === null) {
          marker = {
            "id": "marker",
            "styleId": 'marker',
            "position": latLng,
            "properties": {
              "title": "marker"
            }
          };
          this.markerLayer.add([marker]);
          this.marker = marker;
        } else {
          marker.position = latLng;
          this.markerLayer.updateGeometries([marker]);
        }
      },

      ensure() {
        let latLng = this.latLng;
        if (latLng === null) {
          this.$message('请选择位置');
          return;
        }

        let value = [latLng.lat, latLng.lng];
        this.$emit('input', value);
        this.$emit('change', value, this.address);
      }
    }
  };

</script>

<style lang="scss" scoped>
  .location-setting {
    height: 100%;
    position: relative;

    .location-setting-pos {
      height: calc(100% - 33px);

      .location-setting-map {
        height: 100%;
      }
    }

    .location-setting-address {
      height: 28px;
      margin-bottom: 5px;
      padding-left: 10px;
    }
  }

</style>
